<template>
    <div class="ListTre">
        <div class="ListTre-one"></div>
        <div class="ListTre-Two"></div>
        <div class="ListTre-Tre"></div>
        <div class="ListTre-Fou"></div>
        <div class="ListTre-Fiv"></div>
        <div class="ListTre-Six"></div>
        <div class="ListTre-Sev"></div>
    </div>
</template>
<script>
export default {
    name: 'ListTre'
}
</script>
<style lang="stylus" scoped>
    .ListTre
        min-width: 1108px;
        .ListTre-one
            width: 100%;
            height: 0;
            padding-bottom: 47.4%;
            background: url("/static/indexTre/2.jpg") no-repeat center/contain;
        .ListTre-Two
            width: 100%;
            height: 0;
            padding-bottom: 63.7%;
            background: url("/static/indexTre/3.jpg") no-repeat center/contain;
        .ListTre-Tre
            width: 100%;
            height: 0;
            padding-bottom: 58.1%;
            background: url("/static/indexTre/4.jpg") no-repeat center/contain;
        .ListTre-Fou
            width: 100%;
            height: 0;
            padding-bottom: 60.3%;
            background: url("/static/indexTre/5.jpg") no-repeat center/contain;
        .ListTre-Fiv
            width: 100%;
            height: 0;
            padding-bottom: 45.9%;
            background: url("/static/indexTre/6.jpg") no-repeat center/contain;
        .ListTre-Six
            width: 100%;
            height: 0;
            padding-bottom: 53.2%;
            background: url("/static/indexTre/7.jpg") no-repeat center/contain;
        .ListTre-Sev
            width: 100%;
            height: 0;
            padding-bottom: 70.68%;
            background: url("/static/indexTre/8.jpg") no-repeat center/contain;
</style>